class Carousel {
    constructor(bookConfig) {
        this.bookConfig = bookConfig;
    }

    loadPages() {
        //创建container
        var container = document.createElement("div");
        //创建row
        var row = document.createElement("div");
        container.appendChild(row);

        //添加分页器
        container.appendChild(this.loadPagination());

        //创建缩略图列
        var columnCatalog = document.createElement("div");
        row.appendChild(columnCatalog);
        row.appendChild(this.loadCatalog(this.catalogConfig));

        //创建轮播列
        var columnCurousel = document.createElement("div");
        row.appendChild(columnCurousel);

        //创建swiper容器
        var curousel = document.createElement("div");
        curousel.classList.add("swiper-container");
        columnCurousel.appendChild("curousel");

        //创建swiper包装器
        var swiperWrapper = document.createElement("div");
        swiperWrapper.classList.add("swiper-wrapper");
        //添加Swiper每页的内容
        this.bookConfig.pagesConfig.forEach(page => {
            var swiperSlide = document.createElement("div");
            swiperSlide.id = page.id;
            swiperSlide.classList.add("swiper-slide");
            swiperSlide.innerHTML = page.description;
            swiperWrapper.appendChild(swiperSlide);
        });
        curousel.appendChild(swiperWrapper);

        //添加分页器
        var swiperCatalog;
        if (this.bookConfig.catalogConfig) {
            swiperCatalog = new Swiper(".swiper-thumbs", {
                direction: 'vertical',
                spaceBetween: 5,
                slidesPerView: 5,
                freeMode: true,
                watchSlidesVisibility: true,
                watchSlidesProgress: true,
                scrollbar: {
                    el: '.swiper-scrollbar',
                    hide: true,
                },
            });
        } else {}

        //创建带缩略图的轮播器
        var swiperCurousel = new Swiper('.swiper-curousel', {
            direction: 'vertical',
            pagination: {
                el: '.swiper-pagination',
                type: 'fraction',
            },
            thumbs: {
                swiper: swiperCatalog
            }
        });
    }

    loadCatalog(catalogConfig) {
        //创建swiper容器
        var catalog = document.createElement("div");
        catalog.classList.add("swiper-container");
        //创建swiper包装器
        var swiperWrapper = document.createElement("div");
        swiperWrapper.classList.add("swiper-wrapper");
        //添加Swiper每页的内容
        catalogConfig.forEach(page => {
            var swiperSlide = document.createElement("div");
            swiperSlide.id = page.id;
            swiperSlide.classList.add("swiper-slide");
            swiperSlide.innerHTML = page.description;
            swiperWrapper.appendChild(swiperSlide);
        });
        catalog.appendChild(swiperWrapper);
        //添加滚动条
        var scrollbar = document.createElement("div");
        scrollbar.classList.add("swiper-scrollbar");
        catalog.appendChild(scrollbar);
        return catalog;
    }

    loadPagination() {
        //创建row
        var row = document.createElement("div");
        container.appendChild(row);
        //创建缩略图列
        var columnCatalog = document.createElement("div");
        row.appendChild(columnCatalog);
        row.appendChild(this.loadCatalog(this.bookConfig.catalogConfig));

        //创建轮播列
        var columnCurousel = document.createElement("div");
        row.appendChild(columnCurousel);

        var pagination = document.createElement("div");
        pagination.classList.add("swiper-pagination");
        columnCurousel.appendChild(pagination);
        return row;
    }


}